<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/qrcode.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <link rel="stylesheet" href="plugin/element.css">
    <script src="plugin/element.js"></script>

</head>
<body >
    <div style="width: 100%">
        <div id="qrcode" style="margin: auto;padding-top:100px;width: 240px;height: 240px;">
        </div>
        <div id="app" style="margin: auto;margin-top:-15px;width: 240px;height: 50px;background-color: #b3d8ff"><h3>请扫码支付:{{payMoney}}元</h3></div>
    </div>
<script>

    var app=new Vue({
        el:"#app",
        data:{
            code_url:"",
            orderId:"",
            payMoney:""
        },
        methods:{
            getOrderId(){
                let param=location.href.split("?");
                if(param.length>1){
                    var split = param[1].split("&");
                    for(i=0;i<split.length;i++){
                        if(split[i].split("=")[0]=="orderId"){
                            this.orderId= split[i].split("=")[1];
                            return;
                        }
                    }
                }
            },
            getPayCodeByOrderId(){
                axios.get("/api/wxpay/nativePay/"+this.orderId+"/1").then(res=>{
                    if(res.data.flag==true){
                       this.code_url=res.data.data.code_url;
                       this.payMoney=res.data.data.payMoney;
                       this.drawingPayCode();
                    }else{
                        this.$message.error("订单出现异常");
                    }
                })
            },
            drawingPayCode(){
                let qrcode=new QRCode(document.getElementById("qrcode"),{
                    height:240,
                    width:240
                });
                qrcode.makeCode(this.code_url);
            }
        },
        created(){
            this.getOrderId();//获取orderId
            this.getPayCodeByOrderId();//查询订单获取二维码和支付金额
        }

    });
</script>
</body>
</html>